<template>
  <div class="single-box">
    <el-button class="play-count">
      <i class="iconfont play icon-shipinbofangshibofang"></i>
      播放全部
    </el-button>
    <!-- 表头 -->
    <div class="tab-title">
      <div class="song-name">音乐标题</div>
      <div class="song-author">歌手</div>
      <div class="song-zhuanji">专辑</div>
      <div class="song-time">时长</div>
      <div class="song-host">热度</div>
    </div>
    <ul class="single-list">
      <li class="single-item" v-for="(item,index) in singelResult" :key="index">
        <div class="single-left">
          <p class="left">
            <span class="item-index">{{index+1<10?'0'+(index+1):index+1}}</span>
            <span class="item-love">收藏</span>
          </p>
          <span class="name" @click="playMusic(item.id)">{{ item.name }}</span>
        </div>
        <p class="author">{{ item.ar[0].name }}</p>
        <p class="zhuanji">{{item.al.name}}</p>
        <p class="time">{{item.time | formatPlayTime}}</p>
        <p class="host">{{item.pop}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import {formatPlayList} from '@/util/formatPlayMusic.js'
export default {
  name:'Single',
  created(){
    console.log(this.singelResult);
  },
  props:{
    singelResult:{
      default:()=>[],
      type:Array
    }
  },
  methods:{
    ...mapMutations('Music',['ADDMUSICLIST']),
    ...mapActions('Music',['getMusicCover','getMusicUrl']),
    playMusic(id){
      this.getMusicCover(id),
      this.getMusicUrl(id)
      Promise.all([this.getMusicCover(id),this.getMusicUrl(id)]).then(val=>{
        let obj = formatPlayList(val[1].data[0].time,val[1].data[0].url,val[0].songs[0].name,val[0].songs[0].id,val[0].songs[0].ar[0].name,val[0].songs[0].ar[0].id)
        this.$bus.$emit('formatSteep')
        this.ADDMUSICLIST(obj)
      }).catch(err=>{
        console.log('失败',err);
      })
    }
  }
}
</script>

<style lang="less" scoped>
.single-box {
  padding: .4rem;
  .play-count {
    text-align: center;
    background: rgb(236, 65, 65);
    color: #fff;
    border-radius: 5px;
    padding:.4rem 1rem;
    .play {
      padding: 0px .1rem;
    }
  }
  .tab-title {
    font-size: .7rem;
    width: 100%;
    line-height: 1.4rem;
    height: 1.4rem;
    background: #fafafa;
    color: rgb(125, 120, 120);
    margin-top: .4rem;
    div {
      float: left;
    }
    .song-name {
      padding-left: 10%;
      width: 50%;
    }
    .song-author {
      width: 12.5%;
    }
    .song-time {
      width: 12.5%;
    }
    .song-zhuanji {
      width: 12.5%;
    }
    .song-host {
      width: 12.5%;
    }
  }
  .single-list{
    .single-item {
      width: 100%;
      background: #fff;
      font-size: .8rem;
      line-height: 2.4rem;
      height: 2.4rem;
      overflow: hidden;
      &:hover{
        background: #f1f2f3;
      }
      .single-left {
        float: left;
        display: inline-block;
        width: 50%;
        .left {
          font-size: .66rem;
          color: #b0b0b1;
          width: 20%;
          display: inline-block;
          .item-love {
            margin-left: .5rem;
          }
        }
        .name {
          cursor: pointer;
          width: 80%;
        }
      }
      p{
        font-size: .6rem;
        color: #b0b0b1;
        width: 12.5%;
        height: 100%;
        float: left;
      }
    }
    .single-item:nth-child(even){
      background: #fafafa;
      &:hover{
        background: #f1f2f3;
      }
    }
  }
}
</style>